<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

	<title>Rock Paper Scissors</title>
	<link rel="apple-touch-icon" href="rps_icon.png"/>
	<link rel="apple-touch-startup-image" href="rps_splash.png" />
	<link rel="stylesheet" href="/jquery/jquery.mobile-1.1.0.css" />

	<script src="/jquery/jquery-1.7.2.js"></script>
	<script src="/jquery/jquery.mobile-1.1.0.js"></script>
	<script src="rps.js"></script>

<script>

$(document).ready(function () {
	$(window).bind('orientationchange', function(event) {

		if (event.orientation == "landscape") {
//			$(".player > div").addClass("ui-grid-b");
			$(".player > div > div").addClass("ui-block-b");
		}
		if (event.orientation == "portrait") {
//			$(".player > div").removeClass("ui-grid-b");
			$(".player > div > div").removeClass("ui-block-b");
		}

	});
});

function clearUI() {
	var xresult = RockPaperScissors.result[0];
	var oresult = RockPaperScissors.result[1];
	$("#result").html("X: "+ xresult +" vs. O: "+ oresult);

	clearButtons();
}
function displayWinner(winner_message) {
	$("#menu .message").html(winner_message);
	$.mobile.changePage('#menu', {transition: 'pop', role: 'dialog'});
}
function hideWinner() {
	// not necessary
}
function setCellClickFunction(func) {
	$("#board .button").click(func);
}
function setRestartClickFunction(func) {
	$("#menu .button").click(func);
}
function clearButtons() {
	$("#board .button").buttonMarkup({theme: "c"});
}
function setButtons(board) {
	for (b in board) {
		var id = b + board[b];
		$("#board .button[id="+ id +"]").buttonMarkup({theme: "b"});
	}
}

</script>
<style>

@media screen and (orientation: landscape) {
	#glue {
		line-height: 72px;
	}
}

@media screen and (orientation: portrait) {
	#glue {
		line-height: 92px;
	}
}

.player:first-child {
	-webkit-transform-origin: 50%;
	-webkit-transform: rotate(180deg);
}
.player h4 {
	text-align: center;
	line-height: 17px;
	margin: 0px;
}

</style>
</head> 
<body> 

<!-- Start of first page: #board -->
<div data-role="page" id="board">

	<div data-role="header" data-theme="b">
		<h1>Rock Paper Scissors</h1>
	</div><!-- /header -->

	<div data-role="content" >

<div class="player">
<h4>Player X</h4>
<div class="ui-grid-b">
	<div><button data-theme="a" data-mini="true" id="0R" class="button">Rock</button></div>
	<div><button data-theme="a" data-mini="true" id="0P" class="button">Paper</button></div>
	<div><button data-theme="a" data-mini="true" id="0S" class="button">Scissors</button></div>
</div>
</div>

<div id="glue">&nbsp;</div>

<div class="player">
<h4>Player O</h4>
<div class="ui-grid-b">
	<div><button data-theme="a" data-mini="true" id="1R" class="button">Rock</button></div>
	<div><button data-theme="a" data-mini="true" id="1P" class="button">Paper</button></div>
	<div><button data-theme="a" data-mini="true" id="1S" class="button">Scissors</button></div>
</div>
</div>

	</div><!-- /content -->

	<div data-role="footer" data-theme="d">
		<h4 id="result">Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page board -->

<!-- Start of third page: #menu -->
<div data-role="page" id="menu">

	<div data-role="header" data-theme="b">
		<h1>End of Game</h1>
	</div><!-- /header -->

	<div data-role="content" data-theme="c">
		<h2 class="message">End of Game</h2>
		<p><a href="#" data-rel="back" data-role="button" data-inline="true" data-icon="back" class="button">Back!</a></p>
	</div><!-- /content -->

</div><!-- /page menu -->

</body>
</html>
